<template>
  <view class="newaddress">
    <view class="navcon">
      <u-navbar placeholder :autoBack="true" title="收货地址"></u-navbar>
    </view>
    <!-- 地址详情 -->
    <view class="newaddress_content">
      <view
        class="onecontent"
        v-for="(item, index) in $store.state.addressList"
        :key="index"
      >
        <view class="moren" v-if="item.status == 0">默认</view>
        <view
          class="clickleft"
          @click="xuanze(index)"
          @touchstart="longpress(item.id)"
          @touchend="cleartimer()"
          ></view>
        <view class="onecontentleft">
          <view class="onecontenttop">
            <view class="left">{{ item.title || item.name }}</view>
            <view>{{ item.phone }}</view>
          </view>
          <view class="onecontentbottom">
            <view class="bottomleft">
              {{ item.text || item.city }}
            </view>
            <view class="bottomleft">
              {{ item.address }}
            </view>
          </view>
        </view>
        <view class="onecontentright" @click="skip(item.id)">
          <image
            src="http://s30abnixv.hn-bkt.clouddn.com/newaddressimg1.png"
          ></image>
        </view>
      </view>
    </view>
    <!-- 提示 -->
    <view class="tishi">
      提示:长按可删除当前收货地址。最多只能存在一个默认地址
    </view>
    <!-- 没有更多了 -->
    <view class="notmore"> 没有更多了 </view>
    <!-- 新增地址 -->
    <view class="addaddress_bottom" @click="append"> 新增地址 </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
const store = useStore();
const timer = ref(null);
const append = () => {
  uni.navigateTo({ url: "/pages/address-selection/address-selection" });
};
const xuanze = (index) => {
  store.commit("changeaddindex", index);
  uni.navigateBack();
};
//定时器
const timeset = (id) => {
  timer.value = setTimeout(() => {
    uni.showModal({
      title: "提示",
      content: "是否删除该地址",
      success: (res) => {
        if (res.confirm) {
          console.log(id);
          store.dispatch("addressDelete", id).then(() => {
            store.dispatch("onLoadAddressList");
          });
        }
      },
    });
  }, 1000);
};

const longpress = (id) => {
  // console.log("1");
  timeset(id);
};
const cleartimer = () => {
  if (timer.value) {
    clearTimeout(timer.value);
  }
};
onShow(() => {
  store.dispatch("onLoadAddressList");
});

const skip = (id) => {
  uni.navigateTo({
    url: `/pages/changeaddress/changeaddress?id=${id}`,
  });
};
</script>

<style lang="scss">
.newaddress {
  height: 100vh;
  background-color: #f8f8f8;
  .newaddress_content {
    background-color: #f8f8f8;
    padding: 0 20rpx 20rpx 20rpx;
    .onecontent {
      position: relative;
      margin-top: 20rpx;
      background-color: #fff;
      border-radius: 16rpx;
      padding: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .moren {
        color: #f9436b;
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        font-size: 18rpx;
      }
      .clickleft {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 80%;
        // background-color: #2f3034;
      }
      .onecontentleft {
        width: 80%;
        .onecontenttop {
          color: #2f3034;
          font-size: 30rpx;
          display: flex;
          justify-content: left;
          .left {
            margin-right: 30rpx;
          }
        }
        .onecontentbottom {
          display: flex;
          align-items: center;
          margin-top: 30rpx;

          .bottomleft {
            color: #90939a;
            margin-right: 20rpx;
          }
        }
      }
      .onecontentright {
        width: 20%;
        display: flex;
        justify-content: right;
        image {
          width: 44rpx;
          height: 44rpx;
        }
      }
    }
  }
  .tishi {
    color: #fa6d8a;
    font-size: 24rpx;
    width: 100%;
    text-align: center;
    margin: 20rpx 0rpx;
  }
  .notmore {
    font-size: 28rpx;
    width: 100%;
    text-align: center;
    color: #a0a3a8;
  }
  .addaddress_bottom {
    position: fixed;
    bottom: 40rpx;
    transform: translateX(-50%);
    left: 50%;
    width: 90%;
    text-align: center;
    color: #fff;
    background-color: #f9436b;
    border-radius: 14rpx;
    letter-spacing: 2rpx;
    padding: 20rpx;
  }
}
</style>
